<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="father">
    <el-page-header @back="goBack" content="问界纯电M5" class="header"></el-page-header>
    <div class="body">
      <div>
        <div class="body-item1">
        <img src="@/assets/wenjieM5chundian.png" width="100%">
      </div>
      <div class="body-item2">
        <div class="item2-item1" v-for="(item, index) in imgs" :key="index">
          <div v-for="(item1, index1) in item.srcs" :key="index1">
            <img :src="item1" width="100%">
          </div>
        </div>
      </div>
      </div>
    </div>
    <div class="hello_world">
      <button class="top" @click="toTop">
        <img src="@/assets/backToTop.png" width="100%">
      </button>
    </div>
    <div>
      <router-link to="/w_e_five/shop" tag="div">
        <button class="goToShop">立即购买</button>
      </router-link>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'w_e_five',
  data () {
    return {
      imgs: [
        { srcs: ['https://res.vmallres.com//uomcdn/CN/pms/202311/8D309E65B7B97610646C287F5626FEC4.jpg'] },
        { srcs: ['https://res.vmallres.com//uomcdn/CN/pms/202311/949B82481203E62A643FD0123F7A4488.jpg'] },
        { srcs: ['https://res.vmallres.com//uomcdn/CN/pms/202311/A3F49388E2C54BA301F22FA68B195C92.jpg'] },
        { srcs: ['https://res.vmallres.com//uomcdn/CN/pms/202311/98B6E23B7430B0EB18988D306FF49BAB.jpg'] },
        { srcs: ['https://res.vmallres.com//uomcdn/CN/pms/202311/A390C09F3A4D5BA27E41DE14087B03F7.jpg'] },
        { srcs: ['https://res.vmallres.com//uomcdn/CN/pms/202311/76031031B5B42144D87FE11430748B23.jpg'] },
        { srcs: ['https://res.vmallres.com//uomcdn/CN/pms/202311/3B2DF2DF30F8B269EBCFE62026CD5DBD.jpg'] }
      ]
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    toTop () {
      window.location.reload()
    }
  },
  mounted () {
    this.$nextTick(() => {
      // eslint-disable-next-line no-undef
      this.scroll = new BScroll('.body', {
        click: true,
        mouseWheel: true
      })
    })
  }
}
</script>

<style scoped>
.goToShop{
  width: 80px;
  height: 40px;
  position: absolute;
  bottom:100px;
  left:190px;
  background-color: red;
  border: solid 1px gray;
  border-radius: 5px;
  opacity: 0.8;
}
.top{
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: 100px;
  right: 5px;
  background-color: #fff;
  border: solid 1px gray;
  border-radius: 50%;
}
.body-item1{
  width: 450px;
  height: 50%;
}
.father{
  width: 450px;
  height: 100%;
}
.header{
  width: 100%;
  height:5%;
}
.body{
  width: 450px;
  height: 630px;
  overflow: hidden;
  background-color: #888;
}
</style>
